<template>
  <div class="scroll-wrapper">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
            >
          <van-cell v-for="(item, index) in list" :key="index" :title="item.title" >
          <div slot="label">
          <!-- 图片 当前文章有几张图 就用几个宫格 -->
          <van-grid :column-num="item.cover.images.length">
            <van-grid-item v-for="(img,idx) in item.cover.images" :key="idx">
              <van-image :src="img" lazy-load />
            </van-grid-item>
          </van-grid>

          <!-- 文字说明 -->
          <div class="meta">
            <span>{{item.aut_name}}</span>
            <span>{{item.comm_count}}评论</span>
            <span>{{item.pubdate | formatTime}}</span>
            <span>
              <van-icon name="cross" />
            </span>
          </div>
        </div>
          </van-cell>
          </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { getArticle } from '@/api/article'
export default {
  name: 'ArticleList',
  props: ['channel'],
  data () {
    return {
      list: [],
      loading: false,
      finished: false,
      timestamp: null,
      isLoading: false
    }
  },
  methods: {
    async onLoad () {
      if (!this.timestamp) {
        this.timestamp = Date.now()
      }
      const res = await getArticle(this.channel.id, this.timestamp)
      console.log(res)
      this.timestamp = res.data.data.pre_timestamp
      this.list.push(...res.data.data.results)
      this.loading = false
      if (this.list.length === 0) {
        this.finished = true
      }
    },
    async onRefresh () {
      const res = await getArticle(this.channel.id, Date.now())
      this.list.unshift(...res.data.data.results)
      this.$toast('刷新成功')
      this.isLoading = false
    }
  }
}
</script>

<style lang='less' scoped>

</style>
